<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易待办事项</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }
        
        .add-task {
            display: flex;
            margin-bottom: 30px;
        }
        
        #taskInput {
            flex: 1;
            padding: 12px 15px;
            font-size: 16px;
            border: 2px solid #e0e0e0;
            border-radius: 4px 0 0 4px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        #taskInput:focus {
            border-color: #3498db;
        }
        
        #addButton {
            padding: 12px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        #addButton:hover {
            background-color: #2980b9;
        }
        
        .filters {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .filter-btn {
            padding: 8px 16px;
            background-color: #ecf0f1;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .filter-btn:hover {
            background-color: #d5dbdb;
        }
        
        .filter-btn.active {
            background-color: #3498db;
            color: white;
        }
        
        .task-list {
            list-style: none;
        }
        
        .task-item {
            display: flex;
            align-items: center;
            padding: 12px;
            margin-bottom: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .task-item:hover {
            background-color: #e9ecef;
        }
        
        .task-item.completed {
            background-color: #e8f5e9;
        }
        
        .task-item input[type="checkbox"] {
            margin-right: 12px;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .task-text {
            flex: 1;
            font-size: 16px;
        }
        
        .task-item.completed .task-text {
            text-decoration: line-through;
            color: #7f8c8d;
        }
        
        .delete-btn {
            padding: 6px 10px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .delete-btn:hover {
            background-color: #c0392b;
        }
        
        .empty-state {
            text-align: center;
            color: #7f8c8d;
            padding: 40px 0;
        }
        
        @media (max-width: 600px) {
            .container {
                margin: 20px;
                padding: 15px;
            }
            
            .filters {
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>待办事项</h1>
        
        <div class="add-task">
            <input type="text" id="taskInput" placeholder="输入新的待办事项..." autofocus>
            <button id="addButton">添加</button>
        </div>
        
        <div class="filters">
            <button class="filter-btn active" data-filter="all">全部</button>
            <button class="filter-btn" data-filter="active">未完成</button>
            <button class="filter-btn" data-filter="completed">已完成</button>
        </div>
        
        <ul class="task-list" id="taskList">
            <div class="empty-state">暂无待办事项，开始添加吧！</div>
        </ul>
    </div>
    
    <script>
        // 使用Class实现待办事项应用
        class TodoApp {
            constructor() {
                // DOM元素引用
                this.taskInput = document.getElementById('taskInput');
                this.addButton = document.getElementById('addButton');
                this.taskList = document.getElementById('taskList');
                this.filterButtons = document.querySelectorAll('.filter-btn');
                
                // 状态管理
                this.tasks = [];
                this.currentFilter = 'all';
                
                // 绑定方法
                this.addTask = this.addTask.bind(this);
                this.toggleTask = this.toggleTask.bind(this);
                this.deleteTask = this.deleteTask.bind(this);
                this.filterTasks = this.filterTasks.bind(this);
                this.renderTasks = this.renderTasks.bind(this);
                this.handleKeyPress = this.handleKeyPress.bind(this);
                
                // 初始化
                this.init();
            }
            
            // 初始化应用
            init() {
                this.loadTasks();
                this.setupEventListeners();
            }
            
            // 设置事件监听器
            setupEventListeners() {
                this.addButton.addEventListener('click', this.addTask);
                this.taskInput.addEventListener('keypress', this.handleKeyPress);
                
                this.filterButtons.forEach(button => {
                    button.addEventListener('click', () => 
                        this.filterTasks(button.dataset.filter)
                    );
                });
            }
            
            // 从localStorage加载任务
            loadTasks() {
                const savedTasks = localStorage.getItem('tasks');
                if (savedTasks) {
                    try {
                        this.tasks = JSON.parse(savedTasks);
                        this.renderTasks();
                    } catch (error) {
                        console.error('加载任务失败:', error);
                        this.tasks = [];
                    }
                }
            }
            
            // 保存任务到localStorage
            saveTasks() {
                localStorage.setItem('tasks', JSON.stringify(this.tasks));
            }
            
            // 处理回车键提交
            handleKeyPress(e) {
                if (e.key === 'Enter') {
                    this.addTask();
                }
            }
            
            // 添加新任务
            addTask() {
                const text = this.taskInput.value.trim();
                if (text) {
                    const newTask = {
                        id: Date.now(),
                        text: text,
                        completed: false
                    };
                    
                    this.tasks.push(newTask);
                    this.saveTasks();
                    this.renderTasks();
                    
                    // 清空输入框
                    this.taskInput.value = '';
                    
                    // 聚焦输入框
                    this.taskInput.focus();
                }
            }
            
            // 切换任务完成状态
            toggleTask(id) {
                const task = this.tasks.find(task => task.id === id);
                if (task) {
                    task.completed = !task.completed;
                    this.saveTasks();
                    this.renderTasks();
                }
            }
            
            // 删除任务
            deleteTask(id) {
                // 添加删除动画
                const taskElement = document.querySelector(`[data-id="${id}"]`);
                if (taskElement) {
                    taskElement.style.opacity = '0';
                    taskElement.style.transform = 'translateX(20px)';
                    
                    setTimeout(() => {
                        this.tasks = this.tasks.filter(task => task.id !== id);
                        this.saveTasks();
                        this.renderTasks();
                    }, 300);
                } else {
                    // 如果元素不存在，直接删除
                    this.tasks = this.tasks.filter(task => task.id !== id);
                    this.saveTasks();
                    this.renderTasks();
                }
            }
            
            // 过滤任务
            filterTasks(filter) {
                this.currentFilter = filter;
                
                // 更新过滤按钮状态
                this.filterButtons.forEach(button => {
                    if (button.dataset.filter === filter) {
                        button.classList.add('active');
                    } else {
                        button.classList.remove('active');
                    }
                });
                
                this.renderTasks();
            }
            
            // 渲染任务列表
            renderTasks() {
                // 根据当前过滤条件获取任务
                let filteredTasks;
                switch (this.currentFilter) {
                    case 'active':
                        filteredTasks = this.tasks.filter(task => !task.completed);
                        break;
                    case 'completed':
                        filteredTasks = this.tasks.filter(task => task.completed);
                        break;
                    default:
                        filteredTasks = this.tasks;
                }
                
                // 清空任务列表
                this.taskList.innerHTML = '';
                
                // 检查是否有任务
                if (filteredTasks.length === 0) {
                    const emptyState = document.createElement('div');
                    emptyState.className = 'empty-state';
                    emptyState.textContent = this.tasks.length === 0 ? 
                        '暂无待办事项，开始添加吧！' : '当前筛选条件下没有待办事项';
                    this.taskList.appendChild(emptyState);
                    return;
                }
                
                // 添加任务项
                filteredTasks.forEach(task => {
                    const taskItem = document.createElement('li');
                    taskItem.className = `task-item ${task.completed ? 'completed' : ''}`;
                    taskItem.dataset.id = task.id;
                    
                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.checked = task.completed;
                    checkbox.addEventListener('change', () => this.toggleTask(task.id));
                    
                    const taskText = document.createElement('span');
                    taskText.className = 'task-text';
                    taskText.textContent = task.text;
                    
                    const deleteButton = document.createElement('button');
                    deleteButton.className = 'delete-btn';
                    deleteButton.textContent = '删除';
                    deleteButton.addEventListener('click', () => this.deleteTask(task.id));
                    
                    taskItem.appendChild(checkbox);
                    taskItem.appendChild(taskText);
                    taskItem.appendChild(deleteButton);
                    
                    // 添加进入动画
                    taskItem.style.opacity = '0';
                    taskItem.style.transform = 'translateX(-20px)';
                    this.taskList.appendChild(taskItem);
                    
                    // 触发动画
                    setTimeout(() => {
                        taskItem.style.opacity = '1';
                        taskItem.style.transform = 'translateX(0)';
                    }, 10);
                });
            }
        }
        
        // 创建应用实例
        document.addEventListener('DOMContentLoaded', () => {
            const todoApp = new TodoApp();
        });
    </script>
</body>
</html>